<template>
  <view class="arrow-up-down">
    <u-icon name="arrow-up" :color="sort === 'asc' ? '#f25a27' : '#6F6F6F'" size="16"></u-icon>
    <u-icon name="arrow-down" :color="sort === 'desc' ? '#f25a27' : '#6F6F6F'" size="16"></u-icon>
    <!--    <text class="arrow-up" :class="{ active: props.sort === 'asc' }"></text>-->
    <!--    <text class="arrow-down" :class="{ active: props.sort === 'desc' }"></text>-->
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  sort: {
    type: String,
    default: '',
  },
});
</script>

<style scoped lang="scss">
.arrow-up-down {
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  gap: -10rpx;
  height: 32rpx;
}

//.arrow-up-down {
//  position: relative;
//  height: 20px;
//  .arrow-up {
//    width: 0;
//    height: 0;
//    border-left: 4.5px solid transparent;
//    border-right: 4.5px solid transparent;
//    border-bottom-width: 6px;
//    border-bottom-style: solid;
//    border-bottom-color: #6f6f6f;
//    position: absolute;
//    top: 4px;
//    left: 6px;
//
//    &.active {
//      border-bottom-color: #f25a27;
//    }
//  }
//
//  .arrow-down {
//    width: 0;
//    height: 0;
//    border-left: 4.5px solid transparent;
//    border-right: 4.5px solid transparent;
//    border-top-width: 6px;
//    border-top-style: solid;
//    border-top-color: #6f6f6f;
//    position: absolute;
//    bottom: 1px;
//    left: 6px;
//
//    &.active {
//      border-top-color: #f25a27;
//    }
//  }
//}
</style>
